<script setup>

import {reactive, ref} from 'vue'

const formInline = reactive({
  user: '',
  region: '',
  date: '',
})

const onSubmit = () => {
  console.log('submit!')
}
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    gender: '男',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    gender: '男',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    gender: '男',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    gender: '男',
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    gender: '男',
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    gender: '男',
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    gender: '男',
  },
]

</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>智能辅助系统

      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-scrollbar>
            <el-menu :default-openeds="['1', '3']">
              <el-sub-menu index="1">
                <template #title>
                  <el-icon><message /></el-icon>班级学员管理
                </template>
                <el-menu-item-group>
<!--                  <template #title>Group 1</template>-->
                  <el-menu-item index="1-1">班级管理</el-menu-item>
                  <el-menu-item index="1-2">学员管理</el-menu-item>
                </el-menu-item-group>
<!--                <el-menu-item-group title="Group 2">-->
<!--                  <el-menu-item index="1-3">Option 3</el-menu-item>-->
<!--                </el-menu-item-group>-->
<!--                <el-sub-menu index="1-4">-->
<!--                  <template #title>Option4</template>-->
<!--                  <el-menu-item index="1-4-1">Option 4-1</el-menu-item>-->
<!--                </el-sub-menu>-->
              </el-sub-menu>
              <el-sub-menu index="2">
                <template #title>
                  <el-icon><icon-menu /></el-icon>系统信息管理
                </template>
                <el-menu-item-group>
<!--                  <template #title>Group 1</template>-->
                  <el-menu-item index="2-1">部门管理</el-menu-item>
                  <el-menu-item index="2-2">员工管理</el-menu-item>
                </el-menu-item-group>
<!--                <el-menu-item-group title="Group 2">-->
<!--                  <el-menu-item index="2-3">Option 3</el-menu-item>-->
<!--                </el-menu-item-group>-->
<!--                <el-sub-menu index="2-4">-->
<!--                  <template #title>Option 4</template>-->
<!--                  <el-menu-item index="2-4-1">Option 4-1</el-menu-item>-->
<!--                </el-sub-menu>-->
              </el-sub-menu>
              <el-sub-menu index="3">
                <template #title>
                  <el-icon><setting /></el-icon>数据统计管理
                </template>
                <el-menu-item-group>
<!--                  <template #title>Group 1</template>-->
                  <el-menu-item index="3-1">员工信息统计</el-menu-item>
<!--                  <el-menu-item index="3-2">Option 2</el-menu-item>-->
<!--                </el-menu-item-group>-->
<!--                <el-menu-item-group title="Group 2">-->
<!--                  <el-menu-item index="3-3">Option 3</el-menu-item>-->
                </el-menu-item-group>
<!--                <el-sub-menu index="3-4">-->
<!--                  <template #title>Option 4</template>-->
<!--                  <el-menu-item index="3-4-1">Option 4-1</el-menu-item>-->
<!--                </el-sub-menu>-->
              </el-sub-menu>
            </el-menu>
          </el-scrollbar>

        </el-aside>

        <el-main>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="formInline.user" placeholder="姓名" clearable />
            </el-form-item>
            <el-form-item label="性别">
              <el-select
                  v-model="formInline.region"
                  placeholder="Activity zone"
                  clearable
              >
                <el-option label="男" value="shanghai" />
                <el-option label="女" value="beijing" />
              </el-select>
            </el-form-item>
            <el-form-item label="入职时间">
              <el-date-picker
                  v-model="value1"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  :size="size"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
          <el-button type="primary">新增员工</el-button>
          <el-button type="success">批量删除</el-button>

          <el-table
              ref="multipleTableRef"
              :data="tableData"
              style="width: 100%"
              @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />

            <el-table-column label="姓名" width="120">
              <template #default="scope">{{ scope.row.date }}</template>
            </el-table-column>

            <el-table-column property="name" label="图像" width="120" />
            <el-table-column property="gender" label="性别" width="120" />
            <el-table-column property="name" label="职位" width="120" />
            <el-table-column property="name" label="入职日期" width="120" />
            <el-table-column property="name" label="最后操作时间" width="120" />
            <el-table-column  label="操作" width="120" >
              <template #default="scope">
                <el-button type="text">编辑</el-button>
                <el-button type="text">删除</el-button>
              </template>
            </el-table-column>

          </el-table>

<!--          <el-pagination small layout="prev, pager, next" :total="50" />-->
          <el-pagination
              small
              background
              layout="prev, pager, next"
              :total="50"
              class="mt-4"
          />

        </el-main>
      </el-container>
    </el-container>
  </div>

</template>

